//需求1显示登录对话框
var loginBtn = document.querySelector('header .member > div')
loginBtn.onclick = function() {
  var loginDialog = document.querySelector('section.login')
  loginDialog.style.display = "block"
}

//需求2隐藏登录对话框
var closeloginBtn=document.querySelector("section.login i.icon-close")
closeloginBtn.onclick=function(){
  var loginDialog = document.querySelector('section.login')
  loginDialog.style.display="none"
}

//需求3拖住蓝色区域部分可以屏幕内移动
// 1.获取蓝色部分
var loginBlueBtn=document.querySelector("section.login .menu")
// 2.绑定鼠标按下事件，交给函数处理
loginBlueBtn.onmousedown=function(evt){
var oldE=evt||window.event
// 3.绑定鼠标移动事件，交给函数处理
document.onmousemove=function(evt){
// 4.找到事件对象
var e=evt||window.event
var left=e.clientX-oldE.offsetX
var top=e.clientY-oldE.offsetY
var loginDialog = document.querySelector('section.login .item')
// 5.限制宽度高度,定好位置
if(left<0) left=0
if(top<0)  top=0
var maxLeft=(window.innerWidth||document.documentElement.clientWidth)-loginDialog.offsetWidth
var maxTop=(window.innerHeight||document.documentElement.clientHeight)-loginDialog.offsetHeight
if(left>maxLeft) left=maxLeft
if(top>maxTop) top=maxTop
loginDialog.style.position="absolute"
loginDialog.style.left=left+"px"
loginDialog.style.top=top+"px"
}
// 6.清除效果
document.onmouseup=function(){
document.onmousemove=null
}
}

//需求4短信倒计时
// 获取登录倒计时按钮
var num=5
var captchaObj=document.querySelector("section.login .captcha")
//console.log( captchaObj);
// 绑定点击事件，交给函数处理


//需求6获取行为验证码对话框
captchaObj.onclick=function(){
var xingwei=document.querySelector("section.captcha")
xingwei.style.display = 'block'
document.querySelector("section.captcha i.icon-close").onclick=function(){
xingwei.style.display= 'none'
}
var anxiaBtn=document.querySelector(".btn")
//console.log(anxiaBtn);
anxiaBtn.onmousedown=function(){
    document.onmousemove=function(evt){
    e=evt||window.event
    var left=e.clientX-520-anxiaBtn.offsetWidth/2
    anxiaBtn.style.left=left+"px"
    document.querySelector("section.captcha .check img:nth-of-type(2)").style.left=left+"px"//是让验证码上面的图标一起滑动
    }
}
document.onmouseup=function(){
document.onmousemove=null
}
return


//内容显示5秒后重发
captchaObj.innerText=num+"秒后重发"    
//装定时器
t=setInterval(function(){
    if(num<=1){
    clearInterval(t)
    captchaObj.innerText="重新发送"
    return//后面代码不执行
    }
    num--//倒计时减少
    captchaObj.innerText=num+"秒后重发" 
},1000)
}


//需求5表单验证
//获取提交按钮，绑定点击事件，交给函数处理
var loginSubmitBtn=document.querySelector("section.login .submit")
loginSubmitBtn.onclick=function(){
    var ok=0
    //获取手机号码
    var mobile=document.querySelector(".mobile")
    //if条件 不是11个数 或者是空 就提示 手机号码格式有误
    if(mobile.value==""||mobile.value.length != 11|| !Number(mobile.value)){
    document.querySelector("section.login .form>p:nth-of-type(3)").innerText="手机格式有误"
    }else{
    document.querySelector("section.login .form>p:nth-of-type(3)").innerText=""
    ok++
    }
     //获取验证码
     var password=document.querySelector(".password")
     //console.log(password);
     //if条件 不是四位数 不是纯数字
     if(password.value==""||password.value.length != 4|| !Number(password.value)){
     document.querySelector("section.login .form>p:nth-of-type(4)").innerText="验证码只能是4位纯数字"
     }else{
     document.querySelector("section.login .form>p:nth-of-type(4)").innerText=""
     ok++
     }
     //都验证成功就提交
     if(ok==2){
         alert("表单提交")
     }
}   







